<template>
	<div class="dir-container">
		<p>自定义指令</p>
		<p>自定义指令分为:私有自定义指令和全局自定义指令</p>
		<p v-color_Red>私有自定义指令color_Red</p>
		<p v-color_01="'green'">私有自定义指令color_01</p>
		<p v-color_02="'Red'">私有自定义指令color_02</p>
		<p v-color_global="'blue'">全局自定义指令color_global</p>
	</div>
</template>

<script>
	export default {
		//私有自定义指令节点
		directives: {
			//定义名为color的指令
			color_Red: {
				// bind: function(el){} 非简化写法
				//形参中的el为当前指令绑定的DOM对象
				bind(el){
					el.style.color='red'
				}
			},
			color_01: {
				// bind: function(el){} 非简化写法
				//形参中的el为当前指令绑定的DOM对象
				//bind函数只在指令第一次绑定到元素时调用
				bind(el,binding){
					el.style.color=binding.value
				},
				//update函数会在每次DOM更新时被调用
				update(el,binding){
					el.style.color=binding.value
				}
			},
			//如果bind和update函数中的逻辑完全相同，自定义指令可以简写为函数模式，如下：
			color_02(el,binding){
				el.style.color=binding.value
			}
		}
	}
</script>

<style lang="less" scoped>
	.dir-container{
		padding: 0 20px 20px;
		background-color: turquoise;
		flex: 1;
	}
</style>